<template>
  <el-cascader ref="addressCascader" :style="{ width: '100%' }" clearable placeholder=" " :key="key" :props="props" :options="options" v-model="selectValue" filterable @change="handleChange"></el-cascader>
</template>

<script>
import i18n from '@src/locales';

import { getCountries, getAreaDivisionsInfo, getBatchArea } from '@src/api/Address';
// 国际化灰度
import useFormMultiLanguage from '@hooks/useFormMultiLanguage'
const { internationalGray } = useFormMultiLanguage()

export default {
  name: 'base-dist-picker-international-multi',
  data() {
    return {
      internationalGray,
      key: 0,
      // 是否监听value,
      isWatchValue: true,
      options: [],
      selectValue: [],
      props: {
        value: 'key',
        label: 'name',
        children: 'dist',
        checkStrictly: true,
        lazy: true,
        lazyLoad: this.lazyLoad,
        multiple: true,
      },
    };
  },

  props: {
    value: {
      type: Array,
      default: () => [],
    },
    placeholder: {
      type: String,
      default: i18n.t('common.base.pleaseSelect'),
    },
  },

  watch: {
    value: {
      handler(newVal, oldVal) {
        this.selectValue = newVal;

        if (!this.isWatchValue || newVal?.length === 0) return;

        this.getCountriesCity();
      },

      immediate: true,
    },
  },

  mounted() {
    try {
      this.getInternatilonalCountries();
    } catch (error) {
      console.error(error);
    }
  },

  methods: {
    // 编辑页面用于数据回显的方案
    async getCountriesCity() {
      // 先判断是this.options是否有值（国家数据）
      if (!this.options?.length) {
        // 没有说明在mounted接口调用的获取所有国家的接口还没有返回数据，不采用定时器等待了直接再调用一次
        await this.getInternatilonalCountries();
      }

      const divisionKey = [];
      this.value.map(item => {
        divisionKey.push(item[0]);
      });

      // 通过编辑页面传递过来的国家字段调用该国家的所有省市区数据，
      this.setDist(divisionKey);
    },

    // 获取国家列表
    async getInternatilonalCountries() {
      if (this.options?.length) return;
      const { status, data } = await getCountries();
      if (status === 0) {
        data?.map(item => {
          let { haveStates } = item;
          // 设置叶子节点为false
          item.leaf = !haveStates;
        });
        this.options = (data || []).filter(item => {
          // 非国际化租户只显示中国，中国不需要翻译
          if (!this.internationalGray) return item.key === '中国'
          return item
        });
      }
    },

    // 获取指定国家的所有省市区数据
    async getArea(divisionKey) {
      const { status, data } = await getAreaDivisionsInfo({ divisionKey });

      const dist = data.dist || [];
      if (status === 0 && dist.length) {
        // 设置叶子结点
        this.setLeaf(dist);
      }

      return dist;
    },

    handleChange(value) {
      // 当用户修改了value值，就不监听value了
      this.isWatchValue = false;
      this.$emit('input', value);
    },

    // 通过国家的key获取该国家下的省市区数据，并更新到this.options的相应位置的dist上
    async setDist(divisionKey) {
      const retust = await getBatchArea(divisionKey);

      let { data } = retust;

      // 成功后将数据更新到options的对应国家的dist字段里面
      this.options.map((item, index) => {
        (data || []).map(item2 => {
          if (item.key === item2.key) {
            this.setLeaf(item2.dist);
            // key用于让数据在el-cascader组件上渲染出来
            this.key++;
            this.$set(this.options[index], 'dist', item2.dist);
            return;
          }
        });
      });
    },

    // 通过国家的key值筛选出this.options里面的该国家的其他数据，并返回
    findCountryData(key) {
      let selectCountry = this.options.filter(country => {
        if (country.key === key[0]) {
          console.log(country);
        }
        return country.key === key[0];
      });

      return selectCountry[0] || {};
    },

    async lazyLoad(node, resolve) {
      const { level, value, children } = node;

      // 只有当前点击的是国家需要调用接口
      if (level !== 1) {
        resolve([]);
        return;
      }

      const selectCountry = this.findCountryData(value);
      if (selectCountry.leaf || children?.length) {
        resolve([]);
        return;
      }

      const dist = await this.getArea(value);

      // 通过调用resolve将子节点数据返回，通知组件数据加载完成
      resolve(dist);
    },

    // 设置叶子结点
    setLeaf(arr) {
      for (let item of arr) {
        const { dist } = item;
        if (dist?.length) {
          item.leaf = false;
          this.setLeaf(item.dist);
        } else {
          item.leaf = true;
        }
      }
    },
  },
};
</script>